<script setup>
const { list, playSongBill } = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  playSongBill: {
    type: Function,
    default: () => {
      return ()=>{}
    }
  }
})
</script>

<template>
  <div class="songs-list">
    <div class="songs-item" v-for="item in list" :key="item._id" @click="playSongBill([item])">
      <div class="cover">
        <img :src="item.cover" alt="">
      </div>
      <div class="songs-info">
        <div class="song-title">{{ item.name }}</div>
        <div class="song-name">{{ item.artist }} - {{ item.album}} </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.songs-list{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .songs-item{
    display: flex;
    align-items: center;
    gap: 10px;

    .cover {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .songs-info{
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 5px;
      .song-title{
        font-size: 14px;
      }
      .song-name{
        font-size: 12px;
        color: var(--secondary-text);
      }
    }
  }
}
</style>